<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/aa.css" />
		<link rel="stylesheet" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="js/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/home.css" />
		<script src="./js/shipei.js"></script>
		<script src="./js/swiper.min.js"></script>
		<script src="./js/zepto.min.js"></script>
	</head>
	<style>

	</style>

	<body>
		<div class="header">
			<span class="s1"><a href="">北京</a></span>
			<span class="s2">
				<i class="iconfont">&#xe60d;</i>
				<input type="text" placeholder="输入商品名称" />
			</span>
			<span class="s3"><i class="iconfont">&#xe706;</i>
				<a href="">咨询药师</a> </span>
		</div>
		<div class="mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--这里放置真实显示的DOM内容-->
				<div class="section">
					<div id="slider" class="mui-slider">
						<div class="mui-slider-group mui-slider-loop">
							<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
							<!--<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="http://placehold.it/400x300">
						</a>
					</div>-->
							<!-- 第一张 -->
							<div class="mui-slider-item">
								<a href="#">
									<img src="http://placehold.it/400x300">
								</a>
							</div>
							<!-- 第二张 -->
							<div class="mui-slider-item">
								<a href="#">
									<img src="http://placehold.it/400x300">
								</a>
							</div>
							<!-- 第三张 -->
							<div class="mui-slider-item">
								<a href="#">
									<img src="http://placehold.it/400x300">
								</a>
							</div>
							<!-- 第四张 -->
							<div class="mui-slider-item">
								<a href="#">
									<img src="http://placehold.it/400x300">
								</a>
							</div>
							<!-- 第三张 -->
							<div class="mui-slider-item">
								<a href="#">
									<img src="http://placehold.it/400x300">
								</a>
							</div>
							<!-- 第四张 -->
							<div class="mui-slider-item">
								<a href="#">
									<img src="http://placehold.it/400x300">
								</a>
							</div>
							<div class="mui-slider-item">
								<a href="#">
									<img src="http://placehold.it/400x300">
								</a>
							</div>
							额外增加的一个节点(循环轮播：最后一个节点是第一张轮播)
							<!--<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="http://placehold.it/400x300">
						</a>
					</div>-->
						</div>
						<div class="mui-slider-indicator">
							<div class="mui-indicator mui-active"></div>
							<div class="mui-indicator"></div>
							<div class="mui-indicator"></div>
							<div class="mui-indicator"></div>
						</div>
					</div>
					<div id="lister" class="lister">
						<ul class="list">
							<li>
								<img src="imgs/logo.png" alt="" />
								<span class="wen">中西药品</span>
							</li>
							<li>
								<img src="imgs/logo.png" alt="" />
								<span class="wen">中西药品</span>
							</li>
							<li>
								<img src="imgs/logo.png" alt="" />
								<span class="wen">中西药品</span>
							</li>
							<li>
								<img src="imgs/logo.png" alt="" />
								<span class="wen">中西药品</span>
							</li>
							<li>
								<img src="imgs/logo.png" alt="" />
								<span class="wen">中西药品</span>
							</li>
							<li>
								<img src="imgs/logo.png" alt="" />
								<span class="wen">中西药品</span>
							</li>
							<li>
								<img src="imgs/logo.png" alt="" />
								<span class="wen">中西药品</span>
							</li>
							<li>
								<img src="imgs/logo.png" alt="" />
								<span class="wen">中西药品</span>
							</li>
							<li>
								<img src="imgs/logo.png" alt="" />
								<span class="wen">中西药品</span>
							</li>
							<li>
								<img src="imgs/logo.png" alt="" />
								<span class="wen">中西药品</span>
							</li>

						</ul>

					</div>
				</div>

				<div class="zhengyi">
					<img src="https://p1.maiyaole.com/img/mobile/20177/1502355470621151.jpg" alt="" />
				</div>

				<div class="gonggao">
					<img src="imgs/gong.png" alt="" />
					<div class="upGroo">
						<a href="">
							<img src="imgs/down.png" />
							<span>台风山竹影响部分地区物流延迟</span>
						</a>
						<a href="">
							<img src="imgs/down.png" />
							<span>111集团美国上市成功</span>
						</a>
						<a href="">
							<img src="imgs/down.png" />
							<span>健康优享，传递健康传递爱健康优享，传递健康传递爱</span>
						</a>
						<a href="">
							<img src="imgs/down.png" />
							<span>台风山竹影响部分地区物流延迟</span>
						</a>
						<a href="">
							<img src="imgs/down.png" />
							<span>111集团美国上市成功</span>
						</a>
						<a href="">
							<img src="imgs/down.png" />
							<span>健康优享，传递健康传递爱健康优享，传递健康传递爱</span>
						</a>
					</div>
				</div>
				<div class="bannner">
					<img src="https://p1.maiyaole.com/img/mobile/20187/1535102410723125.jpg" alt="" />
				</div>
				<div class="countDown">
					<img src="imgs/health.png" alt="" />
					<div class="Time">
						<span> 距离时间仅剩余</span>
						<p class="owt"></p>
					</div>
					<a href="">
						更多 <i class="iconfont">&#xe601;</i>
					</a>
				</div>
				<div class="price">
					<ul class="priceul">
						<li class="priceli">
							<img src="imgs/health.png"/>
							<span class="con1">阿是大师大师的2阿萨德</spna>
							<span class="con2">萨达大萨达</span>
						</li>
						<li class="priceli">
							<img src="imgs/health.png"/>
							<span class="con1">阿是大师大师的2阿萨德</spna>
							<span class="con2">萨达大萨达</span>
						</li>
						<li class="priceli">
							<img src="imgs/health.png"/>
							<span class="con1">阿是大师大师的2阿萨德</spna>
							<span class="con2">萨达大萨达</span>
						</li>
						<li class="priceli">
							<img src="imgs/health.png"/>
							<span class="con1">阿是大师大师的2阿萨德</spna>
							<span class="con2">萨达大萨达</span>
						</li>
						<li class="priceli">
							<img src="imgs/health.png"/>
							<span class="con1">阿是大师大师的2阿萨德</spna>
							<span class="con2">萨达大萨达</span>
						</li>
						<li class="priceli">
							<img src="imgs/health.png"/>
							<span class="con1">阿是大师大师的2阿萨德</spna>
							<span class="con2">萨达大萨达</span>
						</li>
						<li class="priceli">
							<img src="imgs/health.png"/>
							<span class="con1">阿是大师大师的2阿萨德</spna>
							<span class="con2">萨达大萨达</span>
						</li>
						<li class="priceli">
							<img src="imgs/health.png"/>
							<span class="con1">阿是大师大师的2阿萨德</spna>
							<span class="con2">萨达大萨达</span>
						</li>
						<li class="priceli">
							<img src="imgs/health.png"/>
							<span class="con1">阿是大师大师的2阿萨德</spna>
							<span class="con2">萨达大萨达</span>
						</li> 
					</ul>
				</div>
			</div>
		</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			// 滚动
			mui('.mui-scroll-wrapper').scroll({
				deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});

			var swiper = new Swiper('.swiper-container', {
				pagination: {
					el: '.swiper-pagination',
					dynamicBullets: true,
				},
			});

			//自动轮播周期，若为0则不自动播放，默认为0；
			var gallery = mui('.mui-slider');
			gallery.slider({
				interval: 3000
			});
			mui.init()

			// 轮播图
			mui.ajax('./js/home_a.json', {
				data: {
					category: 'news'
				},
				dataType: 'json', //服务器返回json格式数据
				type: 'get', //HTTP请求类型
				success: function(data) {
					console.log(data)
					var shuju = data.data.banner;
					for(var i = 0; i < shuju.length; i++) {
						var zhi = shuju[i].pic;
						mui('.mui-slider-item a img')[i].setAttribute('src', zhi)
					}

					var c = data.data.templatedata[0].contentList

					//					console.log(c)

					for(var i = 0; i < c.length; i++) {

						var imgUrl = c[i].adPic;
						var listTest = c[i].adTitle;
						//						console.log(c[i].adPic)
						mui(".lister .list li img")[i].setAttribute("src", imgUrl)
						mui(".lister .list li span")[i].innerText = listTest

					}
				}
			});

			// 倒计时
			showTime();
			var timer = setInterval(showTime, 1000);

			function showTime() {
				var end = Date.parse('2019/01/01');
				var now = Date.now();
				var offset = Math.floor((end - now) / 1000);

				if(offset <= 0) {

					clearInterval(timer);
				}

				var sec = offset % 60;
				var min = Math.floor(offset / 60) % 60;
				var hour = Math.floor(offset / 60 / 60) % 24;
				var day = Math.floor(offset / 60 / 60 / 24);

				sec = sec < 10 ? '0' + sec : sec;
				min = min < 10 ? '0' + min : min;
				hour = hour < 10 ? '0' + hour : hour;
				day = day < 10 ? '0' + day : day;

				document.querySelector('.owt').innerHTML = hour + ':' + min + ':' + sec + '';
			}
			
			mui.ajax('./js/home_concat.json', {
				data: {
					category: 'news'
				},
				dataType: 'json', //服务器返回json格式数据
				type: 'get', //HTTP请求类型
				success: function(data) {
					
					var price=data.data.goodTopic[0].goodProducts;
					for(var i=0;i<price.length;i++){
						console.log(price[i].productImg)
						var newImgs=price[i].productImg;
						var Texts=price[i].productName;
						var Texts2=price[i].promotionWord;
						console.log(Texts2)
						
						mui(".price .priceul .priceli img")[i].setAttribute("src", newImgs)
						mui(".price .priceul .priceli .con1")[i].innerHTML=Texts;
						
					}
				}
				
			});
		</script>
	</body>

</html>